<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- 会先把该元素隐藏，等模板编译完成后再显示 -->
      <!-- v-cloak 用的比较少，因为我们后续会用工程化开发项目（不存在闪动的问题） -->
      <div v-cloak>gender: {{ gender }}</div>

      <!-- 但是 Vue 在做模板编译的时候，认为 {{}} 是插值表达式，是Vue特定的语法，所以，会去解析该语法 -->
      <!-- v-pre：跳过Vue模板解析，原文显示 -->
      <span v-pre> {{ 就想显示两对花括号在页面上 }} </span>

      <div>
        <span>姓名:</span>
        <input type="text" v-model="name" />
      </div>
      <div>
        <span>年龄:</span>
        <input type="number" v-model="age" />
      </div>
      <div>
        <span>性别:</span>
        <select v-model="gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div>
        <button @click="add">添加/修改</button>
      </div>
      <div>
        <table border="1" cellpadding="10" cellspacing="0">
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
          <tr v-for="(v, i) of arr" :key="v.id">
            <td>{{ v.id }}</td>
            <td>{{ v.name }}</td>
            <td>{{ v.age }}</td>
            <td>{{ v.gender }}</td>
            <td>
              <button @click="del(v.id)">删除</button>
              <button @click="edit(v.id)">编辑</button>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <script src="./vue.js"></script>
    <script>
      // 需求1: 铺设页面, 准备初始的数据(自己手写数据结构) - 前面是数组索引+1 *作为序号
      // 需求2: 当输入框没有值, 要给用户一个提示, 必须都有值才能增加新数据 (数据驱动页面哦)
      // 需求3: 添加功能 - 想好数据结构统一对象的key
      // 需求4: 点击编辑功能, 把值赋予到输入框上(不要操作dom, 数据驱动页面)
      // 需求5: 用户修改后, 点击相同按钮 - 想想怎么判断怎么是添加还是修改的功能 (提示: 准备一个全局变量, 点过编辑按钮可以让它为true) - 实现编辑后更新页面效果
      // 需求6: 点击删除, 删除这行数据
      const app = new Vue({
        el: '#app',
        data: {
          flag: false,
          name: '',
          age: '',
          gender: '男',
          arr: [
            { id: 1, name: 'jack', age: 18, gender: '男' },
            { id: 2, name: 'rose', age: 16, gender: '女' },
          ],
        },
        methods: {
          del(id) {
            this.arr = this.arr.filter(ele => ele.id !== id);
          },
          add() {
            if (this.name === '' || this.age === '')
              return alert('姓名和年龄不能为空┗|｀O′|┛ 嗷~~');
            if (!this.flag) {
              this.arr.push({
                id: Math.max(1, ...this.arr.map(ele => ele.id)) + 1,
                name: this.name,
                age: this.age,
                gender: this.gender,
              });
            } else {
              this.flag = false;
              // 需要找到对应修改的数组对象？
              this.obj.name = this.name;
              // this.arr[x].name = this.name
              this.obj.age = this.age;
              this.obj.gender = this.gender;
            }
            this.name = this.age = '';
            this.gender = '男';
          },
          edit(id) {
            this.flag = true;
            // 可以往 this （Vue实例）身上挂数据（没有响应式的，只有在data中定义的数据，才有响应式）
            // 1. arr 里面的数据本身都是响应式的
            // 2. 通过 find 方法找出来的这个对象，也是 arr 数组里面的对象（内存地址）
            // 3. this.obj 也指向数组中的某一个对象
            // 4. this.obj.xxx = xxx 是支持响应式的

            // 记住：以后如果需要保存数据，但是这个数据不需要响应式（数据改变，要不要驱动视图更新），就往 this 身上挂，如果需要响应式，那么就在 data 事先定义好
            this.obj = this.arr.find(ele => ele.id === id);
            this.name = this.obj.name;
            this.age = this.obj.age;
            this.gender = this.obj.gender;
            this.id = this.obj.id;
          },
        },
      });
    </script>
  </body>
</html>
